<template>
  <main class="taskCase_container">
    <h2>任务案例管理</h2>
    <header class="flex flex-between">
      <div class="aside">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="任务案例集编号：">
            <el-input
              v-model="formInline.jcybjID"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入任务案例集编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务场景：">
            <el-input
              v-model="formInline.rwcj"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入任务场景"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务所属地理区域：">
            <el-input
              v-model="formInline.rwssdlqy"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入任务所属地理区域"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="cleanSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="aside">
        <el-button type="primary" @click="mergeRwalj" size="small"
          >合并任务案例集</el-button
        >
        <el-button type="primary" @click="handleImportTaskCase" size="small"
          >导入</el-button
        >
        <el-button type="primary" @click="handleExportTaskCase" size="small"
          >导出</el-button
        >
        <el-button type="primary" @click="deleteAllSelectData" size="small"
          >批量删除</el-button
        >
        <!--        <el-button type="primary" @click="addNewTaskCase(0)" size="small">添加任务案例</el-button>-->
        <el-button type="primary" @click="addNewTaskCase(1)" size="small"
          >添加任务案例集</el-button
        >
      </div>
    </header>
    <main class="table_container">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="iconHadler"
        v-loading="tableLoading"
        @selection-change="handleSelectionChange"
        @expand-change="handleExpendChange"
        row-key="id"
        :expand-row-keys="rowKeyId"
        stripe
        class="mainTable"
        height="73vh"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="tableData[props.$index].rwalList"
              style="width: 100%"
            >
              <el-table-column type="index" label="序号" width="80" />
              <el-table-column
                show-overflow-tooltip
                label="任务案例编号"
                prop="yrwID"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="卫星标识"
                prop="wxbs"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="传感器标识"
                prop="cgqbs"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="优先级"
                prop="yxj"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="观测开始时间"
                width="150"
                prop="gckssj"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="观测结束时间"
                width="150"
                prop="gcjssj"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="中心点访问时刻"
                width="150"
                prop="zxdfwsk"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="经度"
                prop="jd"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="纬度"
                prop="wd"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="侧摆角"
                prop="cbj"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="太阳高度角"
                prop="tygdj"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <span class="operation" @click="sampleEdit(scope.row)"
                    >编辑&nbsp; |&nbsp;
                  </span>
                  <span class="operation" @click="deleteSubRwalData(scope.row)"
                    >删除</span
                  >
                </template>
              </el-table-column>
            </el-table>
            <!--小型分页-->
            <div class="subSmallPage">
              <el-pagination
                @size-change="SubHandleSizeChange"
                @current-change="SubHandleCurrentChange"
                :current-page.sync="subCurtent"
                small
                :page-size="subSize"
                layout="prev, pager, next"
                :total="subtotal"
              ></el-pagination>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index" width="55"></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="任务案例集编号"
          prop="jcybjID"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="任务场景"
          prop="rwcj"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="任务所属地理区域"
          prop="rwssdlqy"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="任务案例数量"
          prop="rwansl"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="operation" @click="createSubRwalData(scope.row)"
              >添加&nbsp; |&nbsp;
            </span>
            <span class="operation" @click="aggregateEdit(scope.row)"
              >编辑&nbsp; |&nbsp;
            </span>
            <span class="operation" @click="deleteAllSelectData(scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
    <div style="color:#fff">任务案例总数：{{ taskCaseTotal }}</div>
    <footer class="fl_row_start">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageCurrent"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </footer>
    <!--    任务案例和任务案例集-->
    <el-dialog
      :title="
        taskCaseBool === 1
          ? sfRwalj
            ? '添加任务案例集'
            : '添加任务案例'
          : sfRwalj
          ? '编辑任务案例集'
          : '编辑任务案例'
      "
      :visible.sync="dialogVisible"
    >
      <el-form
        :label-position="labelPosition"
        ref="rwalForm"
        label-width="150px"
        :rules="rules"
        :model="formLabelAlign"
        class="flex flex-evenly"
        size="small"
        style="margin-top: 35px; align-items: initial"
      >
        <div class="inputContainer" v-if="!sfRwalj">
          <el-form-item label="任务案例编号：" prop="yrwID">
            <el-input
              v-model="formLabelAlign.yrwID"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入任务案例编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="卫星标识：" prop="wxbs">
            <el-input
              v-model="formLabelAlign.wxbs"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入卫星标识"
            ></el-input>
          </el-form-item>
          <el-form-item label="观测开始时间：" prop="gckssj">
            <el-date-picker
              v-model="formLabelAlign.gckssj"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="观测结束时间：" prop="gcjssj">
            <el-date-picker
              v-model="formLabelAlign.gcjssj"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="经度：" prop="jd">
            <el-input
              v-model="formLabelAlign.jd"
              v-only-number
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入经度"
            ></el-input>
          </el-form-item>
          <el-form-item label="侧摆角：" prop="cbj">
            <el-input
              v-model="formLabelAlign.cbj"
              v-only-number
              v-max-length-tip="10"
              v-no-space
              placeholder="请输入侧摆角"
            ></el-input>
          </el-form-item>
        </div>
        <div class="inputContainer" v-if="!sfRwalj">
          <el-form-item label="传感器标识：" prop="cgqbs">
            <el-input
              v-model="formLabelAlign.cgqbs"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入传感器标识"
            ></el-input>
          </el-form-item>
          <el-form-item label="优先级：" prop="yxj">
            <el-select v-model="formLabelAlign.yxj">
              <el-option
                v-for="(item, index) in yxjOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="中心点访问时刻：" prop="zxdfwsk">
            <el-date-picker
              readonly
              v-model="formLabelAlign.zxdfwsk"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="太阳高度角：" prop="tygdj">
            <el-input
              v-model="formLabelAlign.tygdj"
              v-only-number
              v-max-length-tip="10"
              v-no-space
              placeholder="请输入太阳高度角"
            ></el-input>
          </el-form-item>
          <el-form-item label="纬度：" prop="wd">
            <el-input
              v-model="formLabelAlign.wd"
              v-only-number
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入纬度"
            ></el-input>
          </el-form-item>
        </div>
        <div class="inputContainer" v-if="sfRwalj">
          <el-form-item label="任务案例集编号：" prop="jcybjID">
            <el-input
              v-model="formLabelAlign.jcybjID"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入任务案例集编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务所属地理区域：" prop="rwssdlqy">
            <el-input
              v-model="formLabelAlign.rwssdlqy"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入任务所属地理区域"
            ></el-input>
            <!--            <el-select v-model="formLabelAlign.rwssdlqy" placeholder="">-->
            <!--                <el-option-->
            <!--                  v-for="(item,index) in options"-->
            <!--                  :key="index"-->
            <!--                  :label="item.label"-->
            <!--                  :value="item.value"-->
            <!--                >-->
            <!--                </el-option>-->
            <!--              </el-select>-->
          </el-form-item>
        </div>
        <div class="inputContainer" v-if="sfRwalj">
          <el-form-item label="任务场景：" prop="rwcj">
            <el-input
              v-model="formLabelAlign.rwcj"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入任务场景"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveAndUpdateRwalData"
          >确 定</el-button
        >
        <el-button @click="cancelRwalData">取 消</el-button>
      </span>
    </el-dialog>
    <!--  导入 -->
    <el-dialog
      title="导入"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="jxCancell"
      :visible.sync="importVisible"
    >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="EXCEL文件路径：">
          <el-input
            readonly
            v-model="formInline.demand"
            placeholder="请输入文件路径"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <form id="fileForm">
            <input
              type="file"
              id="fileUpload"
              name="file"
              accept=".xls, .xlsx"
              style="display: none"
            />
            <el-button type="primary" @click="selectWjButton">浏览</el-button>
            <el-button
              type="primary"
              @click="jxExcelFile"
              :disabled="formInline.demand === ''"
              >解析文件</el-button
            >
          </form>
        </el-form-item>
      </el-form>
      <main class="table_container">
        <div :key="rwTableKey">
          <el-table
            :data="rwInputData"
            style="width: 100%"
            :default-expand-all="true"
            v-loading="jxtableLoading"
            stripe
            class="mainTable"
            height="380"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="rwInputData[props.$index].rwalList"
                  style="width: 100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    label="任务案例编号"
                    prop="yrwID"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="卫星标识"
                    prop="wxbs"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="传感器标识"
                    prop="cgqbs"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="优先级"
                    prop="yxj"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="观测开始时间"
                    prop="gckssj"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="观测结束时间"
                    prop="gcjssj"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="中心点访问时刻"
                    prop="zxdfwsk"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="经度"
                    prop="jd"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="纬度"
                    prop="wd"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="侧摆角"
                    prop="cbj"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="太阳高度角"
                    prop="tygdj"
                  ></el-table-column>
                </el-table>
                <!--弹窗录入样本分页-->
                <div class="subSmallPage">
                  <el-pagination
                    @current-change="dialogHandleCurrentChange"
                    :current-page.sync="dialogCurtent"
                    small
                    :page-size="dialogSize"
                    layout="prev, pager, next"
                    :total="dialogtotal"
                  ></el-pagination>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="任务案例集编号"
              prop="jcybjID"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="任务场景"
              prop="rwcj"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="任务所属地理区域"
              prop="rwssdlqy"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="任务案例数量"
              prop="rwansl"
            ></el-table-column>
          </el-table>
        </div>
      </main>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jxCommitData">确 定</el-button>
        <el-button @click="jxCancell">取 消</el-button>
      </span>
    </el-dialog>
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
